<template>
  <div id="completeInformation">
    <Top :title="title" iconShow="1"></Top>
    <section class="info">
        <ul class="info-list">
            <li class="info-list-item">
                    <x-input v-model="info.nickName" @blur.native.capture="nickNameBlur(info.nickName)" type="text" :max="11" label-width="2.5rem" placeholder="请输入昵称">
                        <span class="input-label" slot="label">昵称</span>
                    </x-input>
            </li>
            <li class="info-list-item">
                     <x-input v-model="info.realName" @blur.native.capture="realNameBlur(info.realName)" type="text" :max="8" :disabled="isChangeRealname" text-align="left" label-width="2.5rem" placeholder="请输入真实姓名">
                        <span class="input-label" slot="label">真实姓名</span>
                    </x-input>
            </li>
            <li class="info-list-item">
                    <x-input v-model="info.IDCard" type="text" :disabled="isChangeIdcard" :max="18" text-align="left" label-width="2.5rem" placeholder="请输入身份证号">
                        <span class="input-label" slot="label">身份证号</span>
                    </x-input>
            </li>
        </ul>
    </section>
    <div class="submit-btn" @click="submitInfo">完成</div>
  </div>
</template>
<script>
import Top from "../../components/Header";
import util from "../../js/util/util";
import bus from "../../js/bus";
import { cookie, XInput, Group, XButton, Cell } from "vux";
import { Field, MessageBox, Indicator } from "mint-ui";
export default {
  name: "completeInformation",
  components: {
    Field,
    Top,
    XInput,
    XButton,
    Group,
    Cell
  },
  data() {
    return {
      title: "身份认证",
      username: "",
      isChangeRealname: false,
      isChangeIdcard: false,
      info: {
        nickName: "",
        realName: "",
        IDCard: ""
      },
      isType: {
        valid: false
      }
    };
  },
  methods: {
    nickNameBlur(val) {
      let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
      if (val.match(reg)) {
        val = val.replace(reg, "");
      }
      this.info.nickName = val;
    },
    realNameBlur(val) {
      let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
      if (val.match(reg)) {
        val = val.replace(reg, "");
      }
      this.info.realName = val;
    },
    submitInfo() {
      let vm = this,
        prePath = this.$route.meta.prePath;
      let postData = {
        nickName: this.info.nickName,
        name: this.info.realName,
        idCard: this.info.IDCard
      };
      //提交身份验证接口
      if (!postData.nickName) {
        MessageBox({ message: "请输入昵称" });
        return;
      }
      if (!postData.name) {
        MessageBox({ message: "请输入真实姓名" });
        return;
      }
      if (!postData.idCard) {
        MessageBox({ message: "请输入身份证号" });
        return;
      }
      if (!util.IdentityCodeValid(postData.idCard)) {
        MessageBox({ message: "请输入有效的身份证号" });
        return;
      }
      Indicator.open("加载中...");
      this.$http
        .post("/loansupermarket-app/user/idenAuttt", postData)
        .then(res => {
          Indicator.close();
          let resBody = res.body;
          if (resBody.code == "000") {
            window.sessionStorage.setItem(
              "nickname",
              resBody.data.nickName || ""
            );
            window.sessionStorage.setItem("realName", resBody.data.name || "");
            window.sessionStorage.setItem(
              "idcardCode",
              resBody.data.idCard || ""
            );
            this.$router.push({
              path: prePath,
              query: { isIdCard: true }
            });
          } else {
            MessageBox.alert(resBody.mesg, "提示");
          }
        });
    }
  },
  mounted() {
    //document.setTitle('完善资料');
    let prePath = this.$route.meta.prePath;
    if (prePath == "/main/mine") {
      var token = cookie.get("token");
      // 调用用户信息接口，获取手机号码
      this.$http
        .post("/loansupermarket-app/user/queryUser", { token: token })
        .then(response => {
          var resBody = response.body;
          if (resBody.code == "000") {
            let info = {
              nickName: resBody.data.nickName || "",
              realName: resBody.data.name || "",
              IDCard: resBody.data.idCard || ""
            };
            if (resBody.data.name) {
              this.isChangeRealname = true;
            }
            if (resBody.data.idCard) {
              this.isChangeIdcard = true;
            }
            this.info = info;
          } else if (resBody.code == "444") {
            this.$router.push({ path: "/login", query: { history: 1 } });
          }
        });
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../scss/variable/base.scss";
.input-label {
  width: 2.5rem;
  display: inline-block;
  text-align: left;
}
.mint-cell-title {
  text-align: center;
}
.submit-btn {
  margin: 1rem auto;
  width: 90%;
  @include textAlign(1.2rem);
  font-size: 0.45rem;
  color: #ffffff;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff) !important;
}
.info {
  margin-top: 1.4rem;
  font-size: 0.4rem;
  background-color: #ffffff;
  padding: 0 0.3rem;
  &-list {
    &-item {
      padding: 0.1rem 0;
      border-bottom: 1px solid $borderColor;
      &:last-child {
        border: none;
      }
    }
  }
}
</style>

